<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.common {
				border: 1px solid #000000;
				height: 40px;
				line-height: 40px;
				color: blue;
			}

			.special {
				/* 就近原则 */
				color: red;
			}

			p {
				height: 800px;
			}

			.tool {
				position: fixed;
				bottom: 50px;
				right: 0;
			}

			.tool .tool-tips {
				display: none;
				position: fixed;
				height: 40px;
				width: 80px;
				text-align: center;
				line-height: 40px;
				border-radius: 10px;
				border: 1px solid #666666;
				right: 60px;
				bottom: 60px;
			}

			.tool:hover .tool-tips {
				display: block;
			}


			.toHead .image {
				width: 64px;
				height: 64px;
				background: url(../src/置顶.png) no-repeat;
				background-size: 64px 64px;
			}

			.toHead .image:hover {
				background: url(../src/置顶-blue.png) no-repeat;
				background-size: 64px 64px;
			}
		</style>

		<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				if ($(document).scrollTop() <= 0) {
					$("#test2").hide();
				}
				$(window).scroll(function() {
					if ($(document).scrollTop() <= 0) {
						// alert("滚动条已经到达顶部为0");
						$("#test2").hide();
					} else {
						$("#test2").show();
					}
				});
			});
		</script>
	</head>
	<body>
		<!-- 锚点效果，要设置id + a标签 -->
		<!-- a标签的颜色不受父级影响 a标签内部可以嵌套任何东西，除了自己 -->
		<div id="head"></div>
		<div class="common">
			<a href="#content1">文段一</a>
		</div>
		<div class="common">
			文段内容二
		</div>
		<div class="common special">
			文段内容三
		</div>
		<div class="common">
			文段内容四
		</div>

		<p id="content1">文段内容1</p>
		<p id="content2">文段内容2</p>
		<p id="content3">文段内容3</p>
		<p id="content4">文段内容4</p>		 



		<div class="tool" id="test2">
			<a href="#head" class="toHead">
				<div class="image">
				</div>
			</a>
			<div class="tool-tips">
				返回顶部
			</div>
		</div>
	</body>
</html>
